---
title: 'React Imports'
tags: 'react'
description: ''
---

Preferred way of importing React in a page.

## React 17

Although with the [React 17 release](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) it is not mandatory to import React on every page, it is a hassle to get back on top of the file and import a `useState` every time we need to.

With React 17, there are generally [two ways](https://twitter.com/dan_abramov/status/1308739731551858689) of doing react imports:

```jsx {1,6} /useState/
import * as React from 'react';
const [count, setCount] = React.useState(0);

// or

import { useState } from 'react';
const [count, setCount] = useState(0);
```

Well, for the second way, auto import on VSCode works great, but my machine is not that great.

I also hate to remove imports if we decide not to use that hook anymore.

## Preferred Way

```jsx
import * as React from 'react';
```

By using this one, we can just call the hooks without worrying about imports.

Furthermore, if you are using TypeScript, not doing the first way can make code ugly when we need to import many types such as `React.MouseEvent`, `React.ChangeEvent`, etc.
